<template>
    <div class="simplefollowtooltip" ref="simplefollowtooltip"  :style="dynamicStyle" >{{text}}</div>
</template>

<script>

    export default {
        name: "simplefollowtooltip",
        data() {
            return {
                text: '',
                dynamicStyle: '',
                x: 0,
                y: 0,
                visible: false,
                style: ''
            }
        },
        beforeDestroy() {
            // this.$refs.simplefollowtooltip.style.display='none';
            // this.dynamicStyle = 'display: none';
            //console.log('simplefollowtooltip-destroy');
        },
        deactivated() {
            // this.$refs.simplefollowtooltip.style.display='none';
            // this.dynamicStyle = 'display: none';
            //console.log('simplefollowtooltip-deactivated')
        },
        watch: {
            x() {
                this.updateDynamicStyle()
            },
            y() {
                this.updateDynamicStyle()
            },
            visible() {
                this.updateDynamicStyle()
            },
            style() {
                this.updateDynamicStyle()
            }
        },
        created() {

        },
        methods: {
            updateDynamicStyle() {
                const me = this
                const { x, y, visible, style } = me
                me.dynamicStyle = `display:${visible ? '' : 'none'};transform:translate(${x}px,${y}px); ${style}`;
            }
        }


    }
</script>

<style scoped>
    .simplefollowtooltip {
        position:absolute;
        z-index:1001;
        left:10px;
        top:10px;
        transform:translate(-5em, -5em);
        color:#fff;
        background: #000;
        opacity: 0.8;
        padding: 5px;
        border-radius: 3px;
        box-shadow: rgba(0, 0, 0, 0.5) 6px 6px 4px 0px;
        pointer-events:none;
    }
</style>
